<template>
  <div class="edit-wrap">
    <span v-show="showTips">{{tips}}</span>
    <div class="edit-input">
      <span>昵称:</span>
      <input type="text" placeholder="请输入昵称" v-model="nick"/>
    </div>
    <div class="edit-input checkbox">
      <span>性别:</span>
      <label><input type="radio" v-model="sex" value="男">男</label>
      <label><input type="radio" v-model="sex" value="女">女</label>
    </div>
    <div class="edit-input">
      <span>家乡:</span>
      <v-distpicker :province="select.province" :city="select.city" :hide-area="true" @province="changeProvince" @city="changeCity"></v-distpicker>
    </div>
    <div class="edit-input">
      <span>生日:</span>
      <datepicker-2 field="myDate" v-model="date" format="YYYY/MM/DD" :backward="false" :forward="false"></datepicker-2>
    </div>
    <button v-on:click="updateEdit">保存资料</button>
  </div>
</template>

<script>
  import {getCookie, delCookie} from "../../assets/js/cookie";
  import VDistpicker from "v-distpicker/src/Distpicker";
  import Datepicker2 from "vue-datepicker-simple/datepicker-2";

  export default {
    name: "updateInfo",
    components: {Datepicker2, VDistpicker},
    data() {
      return {
        showTips: false,
        tips: '',
        nick: '',
        sex: '男',
        select: { province: '', city: '' },
        date: ''
      }
    },
    mounted() {
      // 页面挂载获取保存的cookie值，渲染到页面上
      let uname = getCookie('username');
      console.log(uname);
      let data = {'uName': uname};
      this.$http.post('api/user/findUserinfo.do', data).then((res) => {
        console.log(res.data);
        if (res.data.state == 1) {
          this.tips = res.data.msg;
          this.showTips = true;
          // 删除cookie
          delCookie('username');
          setTimeout(function () {
            this.$router.push('/regist');
          }.bind(this), 1000);
        } else if (res.data.state == 0) {
          let resp = res.data.data;
          let place = resp.place.split('-');
          this.nick = resp.nick;
          this.sex = resp.sex;
          this.select.province = place[0];
          this.select.city = place[1];
          this.date = resp.birth;
        }
      }).catch((res) => {
        console.log(res.data.msg);
      })
    },
    methods: {
      changeProvince(data) {
        this.select.province = data.value;
      },
      changeCity(data) {
        this.select.city = data.value;
      },
      updateEdit() {
        let place = this.select.province + '-' + this.select.city;
        console.log(place);
        let data = {'uName': getCookie('username'), 'uNick': this.nick, 'uSex': this.sex, 'uPlace': place, 'uBirth': this.date};
        // 接口请求
        this.$http.post('api/user/updateUser.do', data).then((res) => {
          console.log(res.data);
          if (res.data.state == 1) {
            this.tips = res.data.msg;
            this.showTips = true;
            setTimeout(function () {
              this.$router.push('/regist');
            }.bind(this), 1000);
          } else {
            this.tips = res.data.msg;
            this.showTips = true;
            setTimeout(function () {
              this.$router.push('/mine');
            }.bind(this), 1000);
          }
        }).catch((res) => {
          console.log(res.data.msg);
        })
      }
    }
  }
</script>

<style lang="less">
  .edit-wrap {
    width: 100%;
    margin: 0.5rem auto;
    text-align: center;
    span {
      font-size: 0.28rem;
      color: #ff0000;
      line-height: 0.4rem;
    }
    .edit-input {
      width: 5.5rem;
      height: 0.4rem;
      padding: 0.15rem 0.2rem;
      margin: 0 auto 0.4rem;
      span {
        width: 1rem;
        height: 0.4rem;
        float: left;
        font-size: 0.28rem;
        color: #666666;
        line-height: 0.4rem;
        text-align: left;
      }
      input {
        width: 4rem;
        height: 0.4rem;
        padding-left: 0.3rem;
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #cccccc;
        display: block;
        float: left;
        outline: none;
        font-size: 0.28rem;
        color: #666666;
        line-height: 0.4rem;
      }
      .distpicker-address-wrapper {
        width: 4.5rem;
        height: 0.4rem;
        float: left;
        select {
          width: 2rem;
          height: 0.4rem;
          padding: 0 0 1px 0.2rem;
          background-color: transparent;
          border: none;
          border-bottom: 1px solid #cccccc;
          border-radius: 0;
          outline: none;
          font-size: 0.28rem;
          color: #666666;
          line-height: 0.4rem;
          display: block;
          float: left;
          margin-right: 0.2rem;
          option {
            width: 2rem;
            height: 0.4rem;
            padding: 0;
            font-size: 0.28rem;
            color: #666666;
            line-height: 0.4rem;
            display: block;
          }
        }
      }
      .vue-datepicker {
        width: 4.5rem;
        height: 0.4rem;
        float: left;
        input {
          width: 100%;
          height: 0.4rem;
          border: none;
          border-bottom: 1px solid #cccccc;
        }
        .vue-datepicker-panels {
          width: calc(100% - 0.2rem);
          border: 1px solid #cccccc;
          padding: 0.1rem;
          .vue-datepicker-panel {
            width: 100%;
            font-size: 0.28rem;
            .vue-datepicker-month {
              height: 0.4rem;
              line-height: 0.4rem;
              margin-bottom: 0.1rem;
              a {
                width: 0.4rem;
                height: 0.4rem;
                font-size: 0.28rem;
              }
              span {
                width: 3.5rem;
                height: 0.4rem;
                text-align: center;
              }
            }
            .vue-datepicker-tb {
              width: 4.2rem;
              thead {
                height: 0.5rem;
                border-color: #cccccc;
                th {
                  width: 0.5rem;
                  height: 0.5rem;
                  font-size: 0.24rem;
                  line-height: 0.5rem;
                }
              }
              tbody {
                td {
                  width: 0.5rem;
                  height: 0.5rem;
                  span {
                    width: 0.5rem;
                    height: 0.5rem;
                    font-size: 0.24rem;
                    line-height: 0.5rem;
                    text-align: center;
                  }
                }
              }
            }
            .vue-datepicker-tb2 {
              width: 4.2rem;
              td {
                height: 0.5rem;
                padding: 0.05rem 0;
                span {
                  font-size: 0.24rem;
                  line-height: 0.5rem;
                  text-align: center;
                }
              }
            }
          }
        }
      }
      &.checkbox {
        span {
          margin-right: 0.3rem;
        }
        label {
          width: 1rem;
          height: 0.4rem;
          float: left;
          font-size: 0.28rem;
          color: #666666;
          line-height: 0.4rem;
          text-align: left;
        }
        input {
          width: 0.3rem;
          height: 0.3rem;
          margin: 0.05rem 0.1rem 0 0;
          float: left;
        }
      }
    }
    button {
      width: 2rem;
      height: 0.7rem;
      background-color: #41b883;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      border: none;
      outline: none;
      margin: 0.5rem auto 0.3rem;
      display: block;
      font-size: 0.28rem;
      color: #ffffff;
      line-height: 0.7rem;
      text-align: center;
    }
  }
</style>
